import React from "react";
import type { Meta, StoryObj } from "@storybook/react-webpack5";
import { Menu } from "./menu";
import { MenuItem } from "./menuItem";
import { SubMenu } from "./subMenu";

/**
 * Menu 组件 Storybook 配置
 *
 * 这个文件定义了 Menu 组件在 Storybook 中的所有示例和文档。
 * 每个 story 都展示了 Menu 组件的不同使用场景和功能特性。
 */

// Storybook 元数据配置
const meta: Meta<typeof Menu> = {
  title: "Components/Menu", // 组件在 Storybook 侧边栏中的路径
  component: Menu, // 关联的组件
  tags: ["autodocs"], // 自动生成文档
  parameters: {
    layout: "centered", // 布局配置
    // 组件文档配置
    docs: {
      description: {
        component: `
# Menu 菜单组件

一个功能丰富的导航菜单组件，支持水平和垂直布局、多级嵌套、禁用状态等特性。

## 功能特性

- ✅ 支持水平和垂直两种布局模式
- ✅ 支持多级嵌套子菜单
- ✅ 支持菜单项禁用状态
- ✅ 支持默认选中项配置
- ✅ 支持点击事件回调
- ✅ 支持图标和自定义内容
- ✅ 响应式设计
- ✅ 键盘导航支持

## 使用示例

\`\`\`tsx
// 基本水平菜单
<Menu mode="horizontal" defaultIndex="0">
  <MenuItem>首页</MenuItem>
  <MenuItem>关于我们</MenuItem>
  <SubMenu title="产品">
    <MenuItem>产品介绍</MenuItem>
    <MenuItem>产品特性</MenuItem>
  </SubMenu>
</Menu>

// 垂直菜单
<Menu mode="vertical">
  <MenuItem>首页</MenuItem>
  <SubMenu title="产品">
    <MenuItem>产品介绍</MenuItem>
  </SubMenu>
</Menu>
\`\`\`
        `,
      },
    },
    // 控件面板配置
    controls: {
      exclude: ["className", "style"], // 排除不需要在控件面板显示的属性
    },
  },
  // 参数类型配置
  argTypes: {
    mode: {
      control: { type: "select" }, // 使用下拉选择控件
      options: ["horizontal", "vertical"], // 可选项
      description: "设置菜单的布局模式", // 参数描述
      table: {
        type: { summary: "'horizontal' | 'vertical'" }, // 类型摘要
        defaultValue: { summary: "'horizontal'" }, // 默认值
      },
    },
    defaultIndex: {
      control: { type: "text" }, // 使用文本输入控件
      description: '设置默认选中的菜单项索引，支持嵌套索引如 "2-1"', // 参数描述
      table: {
        type: { summary: "string" }, // 类型摘要
        defaultValue: { summary: "'0'" }, // 默认值
      },
    },
    onSelect: {
      action: "selected", // 动作记录
      description: "菜单项被选中时的回调函数", // 参数描述
      table: {
        type: { summary: "(selectedIndex: string) => void" }, // 类型摘要
      },
    },
    className: {
      control: { type: "text" }, // 使用文本输入控件
      description: "自定义 CSS 类名", // 参数描述
      table: {
        type: { summary: "string" }, // 类型摘要
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * 水平菜单示例
 *
 * 展示水平布局的菜单，适合用作网站的主导航栏。
 * 包含普通菜单项和带子菜单的下拉菜单。
 */
export const Horizontal: Story = {
  name: "水平菜单", // 中文翻译名称
  render: (args) => (
    <Menu {...args}>
      <MenuItem>首页</MenuItem>
      <MenuItem>关于我们</MenuItem>
      <SubMenu title="产品">
        <MenuItem>产品介绍</MenuItem>
        <MenuItem>产品特性</MenuItem>
        <MenuItem>价格方案</MenuItem>
      </SubMenu>
      <MenuItem>联系我们</MenuItem>
    </Menu>
  ),
  args: {
    mode: "horizontal", // 水平布局模式
    defaultIndex: "0", // 默认选中第一项
  },
  parameters: {
    docs: {
      description: {
        story:
          "水平布局的菜单，适合用作网站的主导航栏。支持下拉子菜单，鼠标悬停时显示子菜单项。",
      },
    },
  },
};

/**
 * 垂直菜单示例
 *
 * 展示垂直布局的菜单，适合用作侧边栏导航。
 * 支持多级嵌套子菜单，点击展开/收起子菜单。
 */
export const Vertical: Story = {
  name: "垂直菜单", // 中文翻译名称
  render: (args) => (
    <div style={{ width: "200px" }}>
      <Menu {...args}>
        <MenuItem>首页</MenuItem>
        <MenuItem>关于我们</MenuItem>
        <SubMenu title="产品">
          <MenuItem>产品介绍</MenuItem>
          <MenuItem>产品特性</MenuItem>
          <MenuItem>价格方案</MenuItem>
        </SubMenu>
        <SubMenu title="服务">
          <MenuItem>技术支持</MenuItem>
          <MenuItem>客户服务</MenuItem>
          <SubMenu title="培训">
            <MenuItem>在线培训</MenuItem>
            <MenuItem>现场培训</MenuItem>
          </SubMenu>
        </SubMenu>
        <MenuItem>联系我们</MenuItem>
      </Menu>
    </div>
  ),
  args: {
    mode: "vertical", // 垂直布局模式
    defaultIndex: "0", // 默认选中第一项
  },
  parameters: {
    docs: {
      description: {
        story:
          "垂直布局的菜单，适合用作侧边栏导航。支持多级嵌套子菜单，点击展开/收起子菜单项。",
      },
    },
  },
};

/**
 * 默认选中示例
 *
 * 展示如何设置默认选中的菜单项，包括嵌套子菜单项。
 * 使用 "2-1" 格式表示第3个菜单项的第2个子项。
 */
export const WithDefaultSelected: Story = {
  name: "默认选中", // 中文翻译名称
  render: (args) => (
    <Menu {...args}>
      <MenuItem>首页</MenuItem>
      <MenuItem>关于我们</MenuItem>
      <SubMenu title="产品">
        <MenuItem>产品介绍</MenuItem>
        <MenuItem>产品特性</MenuItem>
        <MenuItem>价格方案</MenuItem>
      </SubMenu>
      <MenuItem>联系我们</MenuItem>
    </Menu>
  ),
  args: {
    mode: "horizontal", // 水平布局模式
    defaultIndex: "2-1", // 默认选中第3个菜单项的第2个子项（产品特性）
  },
  parameters: {
    docs: {
      description: {
        story:
          '展示如何设置默认选中的菜单项。索引格式为 "父级索引-子级索引"，例如 "2-1" 表示第3个菜单项的第2个子项。',
      },
    },
  },
};

/**
 * 嵌套菜单示例
 *
 * 展示多级嵌套的复杂菜单结构，支持无限层级嵌套。
 * 适合用于复杂的导航结构和分类系统。
 */
export const NestedMenu: Story = {
  name: "多级嵌套", // 中文翻译名称
  render: (args) => (
    <div style={{ width: "250px" }}>
      <Menu {...args}>
        <MenuItem>首页</MenuItem>
        <SubMenu title="产品">
          <MenuItem>产品介绍</MenuItem>
          <SubMenu title="产品系列">
            <MenuItem>基础版</MenuItem>
            <MenuItem>专业版</MenuItem>
            <SubMenu title="企业版">
              <MenuItem>标准版</MenuItem>
              <MenuItem>高级版</MenuItem>
            </SubMenu>
          </SubMenu>
          <MenuItem>价格方案</MenuItem>
        </SubMenu>
        <SubMenu title="服务">
          <MenuItem>技术支持</MenuItem>
          <MenuItem>客户服务</MenuItem>
          <SubMenu title="培训">
            <MenuItem>在线培训</MenuItem>
            <MenuItem>现场培训</MenuItem>
          </SubMenu>
        </SubMenu>
        <MenuItem>联系我们</MenuItem>
      </Menu>
    </div>
  ),
  args: {
    mode: "vertical", // 垂直布局模式，更适合展示多级嵌套
  },
  parameters: {
    docs: {
      description: {
        story:
          "展示多级嵌套的复杂菜单结构。支持无限层级嵌套，每个子菜单都可以包含更多的子菜单项。",
      },
    },
  },
};

/**
 * 禁用菜单项示例
 *
 * 展示如何禁用特定的菜单项，禁用的菜单项无法点击。
 * 支持在普通菜单项和子菜单项中使用禁用状态。
 */
export const WithDisabledItems: Story = {
  name: "禁用菜单项", // 中文翻译名称
  render: (args) => (
    <Menu {...args}>
      <MenuItem>首页</MenuItem>
      <MenuItem disabled>关于我们</MenuItem>
      <SubMenu title="产品">
        <MenuItem>产品介绍</MenuItem>
        <MenuItem disabled>产品特性</MenuItem>
        <MenuItem>价格方案</MenuItem>
      </SubMenu>
      <MenuItem>联系我们</MenuItem>
    </Menu>
  ),
  args: {
    mode: "horizontal", // 水平布局模式
  },
  parameters: {
    docs: {
      description: {
        story:
          "展示如何禁用特定的菜单项。禁用的菜单项会显示为灰色且无法点击，适合用于权限控制或功能暂时不可用的场景。",
      },
    },
  },
};

/**
 * 带图标的菜单示例
 *
 * 展示如何在菜单项中添加图标，提升用户体验。
 * 图标可以是 emoji、字体图标或自定义图标组件。
 */
export const WithIcons: Story = {
  name: "带图标菜单", // 中文翻译名称
  render: (args) => (
    <div style={{ width: "200px" }}>
      <Menu {...args}>
        <MenuItem>
          <span style={{ marginRight: "8px" }}>🏠</span>
          首页
        </MenuItem>
        <MenuItem>
          <span style={{ marginRight: "8px" }}>👥</span>
          关于我们
        </MenuItem>
        <SubMenu title="产品">
          <MenuItem>产品介绍</MenuItem>
          <MenuItem>产品特性</MenuItem>
          <MenuItem>价格方案</MenuItem>
        </SubMenu>
        <MenuItem>
          <span style={{ marginRight: "8px" }}>📞</span>
          联系我们
        </MenuItem>
      </Menu>
    </div>
  ),
  args: {
    mode: "vertical", // 垂直布局模式，更适合展示图标
  },
  parameters: {
    docs: {
      description: {
        story:
          "展示如何在菜单项中添加图标。图标可以是 emoji、字体图标或自定义图标组件，提升菜单的视觉效果和用户体验。",
      },
    },
  },
};

/**
 * 响应式菜单示例
 *
 * 展示响应式菜单设计，适应不同屏幕尺寸。
 * 桌面端使用水平布局，移动端使用垂直布局。
 */
export const ResponsiveMenu: Story = {
  name: "响应式菜单", // 中文翻译名称
  render: (args) => (
    <div>
      <h3 style={{ marginBottom: "16px" }}>水平菜单（适合桌面端）</h3>
      <Menu {...args} mode="horizontal">
        <MenuItem>首页</MenuItem>
        <MenuItem>关于我们</MenuItem>
        <SubMenu title="产品">
          <MenuItem>产品介绍</MenuItem>
          <MenuItem>产品特性</MenuItem>
          <MenuItem>价格方案</MenuItem>
        </SubMenu>
        <MenuItem>联系我们</MenuItem>
      </Menu>

      <h3 style={{ marginTop: "32px", marginBottom: "16px" }}>
        垂直菜单（适合移动端）
      </h3>
      <div style={{ width: "200px" }}>
        <Menu {...args} mode="vertical">
          <MenuItem>首页</MenuItem>
          <MenuItem>关于我们</MenuItem>
          <SubMenu title="产品">
            <MenuItem>产品介绍</MenuItem>
            <MenuItem>产品特性</MenuItem>
            <MenuItem>价格方案</MenuItem>
          </SubMenu>
          <MenuItem>联系我们</MenuItem>
        </Menu>
      </div>
    </div>
  ),
  args: {
    defaultIndex: "0", // 默认选中第一项
  },
  parameters: {
    docs: {
      description: {
        story:
          "展示响应式菜单设计。同一套菜单内容在桌面端使用水平布局，在移动端使用垂直布局，适应不同屏幕尺寸。",
      },
    },
  },
};